<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            height: 100px;
            width: 100px;
            background-color: #f00;
            /* transition: background-color 200ms linear; */
        }
        .active {
            background-color: #00f;
        }
    </style>
</head>
<body>
    <div class="box"></div>

    <button disabled></button>

    <script>

        // 一秒后把box变成blue  并且加上500ms的动画
        // setTimeout(function () {
        //     const box = document.querySelector('.box');
        //     box.setAttribute('style', 'background-color: blue;');
        // }, 1000);

        // flag
        const box = document.querySelector('.box');
        const btn = document.querySelector('button');
        btn.disabled = true;
        let flag = true;

        function run () {
            box.setAttribute('class', `box ${ flag ? 'active' : '' }`);
            flag = !flag;
        }

        run();
        // 定时器的id
        const timer = setInterval(run, 1000);

        setTimeout(function () {
            // 清除定时器
            clearInterval(timer);
        }, 3000);



        // function run () {
        //     console.log('hello world');
        // }

        // // run();
        // setTimeout(run, 1000);

    </script>
</body>
</html>